<template>
	<view class="order">
		<view class="team_top">
			<view class="header-card">
				<view class="words">
					<view class="title">重要通知</view>
					<view class="item">①严禁买卖、转借电话卡。</view>
					<view class="item">②严禁使用购买的电话卡用于电销（确实需要使用的，联系平台报备）。</view>
					<view class="item">③严禁使用电话卡进行诈骗、严禁使用电话卡发送骚扰信息。</view>
					<view class="item">④同一用户，30天内在本平台仅可购买一张电话卡。</view>
				</view>
			</view>
			<view class="nav">
				<u-tabs :list="navList" height='88' active-color='#26C281' inactive-color='#222222' :is-scroll="false"
					:current="current" @change="navChange"></u-tabs>
			</view>
		</view>
		<u-modal v-model="show" :content="content"></u-modal>

		<view style="height: 560rpx;"></view>
		<!--  -->
		<view class="no_html" v-if="list.length==0">
			<image src="@/static/images/no_img5.png" mode=""></image>
			<text>暂无信息</text>
		</view>
		<view v-else>
			<view class="list" v-for="(item,index) in list" :key="index" @click="detailsBtn(item.id)">
				<view class="list_top">
					<view class="text">
						<text class="color2">{{item.cate_id_text}}</text>
					</view>

				</view>
				<view class="goods_info">
					<view class="image">
						<image :src="item.photos" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="name one-txt-cut">{{item.name}}</view>
						<!-- <view class="tip">
							<text>佣金：{{item.junior_rebate}}</text>
						</view> -->
						<view class="money1">
							<view class="left">
								<text>佣金：{{item.rebate}} 元</text>
							</view>
							<!-- <view class="r-btn" @click.stop="receiptFour(item.id)">下级佣金</view> -->
						</view>
						<view class="pro-item">月租：{{item.monthly}}</view>
						<view class="pro-item">流量：{{item.flow}}</view>
						<view class="pro-item">通话分钟：{{item.call_minutes}}</view>
						<view class="pro-item">年龄：{{item.age}}</view>
						<view class="pro-item">充值要求：{{item.demand}}</view>
					</view>
				</view>
				<!-- <view class="tip_txt1">
					<view class="left">共1种商品</view>
					<view class="right">
						<text class="txt1">合计：</text>
						<text class="txt2">￥</text>
					</view>
				</view> -->
				<view class="list_btn">
					<!-- 仓储才有 -->
					<text class="btn1" @click.stop="dianji(item.jsgz,'结算规则')">结算规则</text>
					<text class="btn1" @click.stop="dianji(item.spxz,'商品限制')">商品限制</text>
					<text class="btn1" @click.stop="copyBtn(item.web_url_text)">复制链接</text>
					<text class="btn1" @click.stop="createBanner(item)">生成海报</text>
					<!-- <text class="btn1" @click.stop="">下架</text> -->
				</view>
			</view>
		</view>
		<view class="mall_loading" v-if="list.length">
			<u-loadmore :status="status" color='#999' />
		</view>
		<!-- 确认收货 -->
		<ConfirmReceipt ref="confirm_receipt" @submit='submitBtn'></ConfirmReceipt>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import ConfirmReceipt from '@/components/confirm_receipt/confirm_receipt.vue';
	export default {
		components: {
			ConfirmReceipt
		},
		data() {
			return {
				navList: [{
					name: '主推'
				}, {
					name: '电信卡'
				}, {
					name: '联通卡'
				}, {
					name: '移动卡'
				}],
				current: 0,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page: 1,
				list: [],
				ids: '',
				user_info: [],
				visible: false,
				show: false,
				content: ''
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			}),
		},
		onShow() {

		},
		onLoad(opt) {
			this.page = 1
			this.ids = opt.ids;
			this.getList()
			this.shopInfo()
		},
		onHide() {
			this.$refs.confirm_receipt.closeBtn()
		},
		methods: {
			copyBtn(txt) {

				uni.setClipboardData({
					data: txt,
					success: function() {
						console.log('success');
					}
				});
			},
			// 获取用户信息
			shopInfo() {
				var that = this
				that.$tips.showLoading('加载中')
				that.$httpApi.userShop().then((res) => {
					that.$tips.hideLoading()
					if (res.code == 1) {
						that.user_info = res.data.userinfo;
						that.spread = res.data.spread
					}
				})
			},
			// 列表
			getList() {
				var that = this
				if (that.page == 1) {
					that.$tips.showLoading('加载中')
				} else {
					that.status = 'loading'
				}
				var params = {
					page: that.page,
					agent_id: this.ids,
					cate_id: that.current ? that.current : ''
				}
				that.$httpApi.orderListGoods(params).then((res) => {
					if (res.code == 1) {
						if (that.page == 1) {
							that.list = []
							that.$tips.hideLoading()
						}
						if (res.data.current_page == res.data.last_page) {
							that.status = 'nomore'
						} else {
							that.status = 'loadmore'
						}
						that.list = that.list.concat(res.data.data)
					}
				})
			},

			detailsBtn(ids) {
				uni.navigateTo({
					url: '/pages/order/order_details?id=' + ids + '&agid=' + this.user_info.id
				})
			},

			// 切换
			navChange(index) {
				this.current = index
				this.page = 1
				this.getList()
			},
			// 查看物流
			logisticsBtn(val) {
				uni.navigateTo({
					url: '/pages/other/logistics?order=' + val
				})
			},
			// 联系店长
			phoneBtn(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},

			/**
			 * 生成海报
			 */
			createBanner(item) {
				let {
					id,
					packages_id
				} = item
				uni.navigateTo({
					url: `/pages/order/CreateBanner?id=${id}&packages_id=${packages_id}`
				})
			},



			// 联系客服
			kfBtn() {
				uni.navigateTo({
					url: '/pages/other/text?type=4'
				})
			},
			// 修改佣金
			receiptFour(val, rebate) {
				this.$refs.confirm_receipt.receiptFour(val)
			},
			dianji(val, title) {
				this.show = true;
				this.content = val
			},

			tongyi() {
				this.$refs.confirm_receipt.openBtnTwo(this.ids)
			},
			submitBtn() {
				this.page = 1
				this.getList()
			},
		},
		onReachBottom() {
			if (this.status == 'nomore' || this.status == 'loading') {
				return
			}
			this.page++
			this.getList()
		},
	}
</script>

<style lang="less">
	.order {
		width: 100%;

		.header-card {
			background: #26C281;
			color: #fff;
			margin: 30rpx;
			line-height: 150%;
			padding: 30rpx;
			border-radius: 10rpx;
			
			.title{font-size:30rpx;font-weight:bold;padding:10rpx 0}
		}

		.team_top {
			position: fixed;
			z-index: 10;
			width: 100%;
			background: #fff;
			border-bottom: 2rpx solid #f7f8fa;

			.nav {
				width: 100%;
				height: 88rpx;
			}
		}

		// 
		.list {
			width: 100%;
			background: #fff;
			margin-bottom: 24rpx;

			.list_top {
				width: 100%;
				line-height: 88rpx;
				padding: 0 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;

					text {
						display: block;
						margin-right: 10rpx;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}

					.color1 {
						background: #FFA551;
					}

					.color2 {
						background: #26C281;
					}

					.color3 {
						background: #148EFF;
					}

					.color4 {
						background: #BC171B;
					}
				}

				.right {
					color: #666;
				}

				.right1 {
					color: #FF6230;
				}
			}

			.goods_info {
				width: 100%;
				padding: 24rpx 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;

				.image {
					position: relative;
					width: 240rpx;
					height: 240rpx;

					image {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.info {
					width: calc(100% - 240rpx);
					padding-left: 20rpx;

					.pro-item {
						color: #666;
						line-height: 160%;
					}

					.name {
						width: 100%;
						font-size: 30rpx;
						font-weight: bold;
						color: #222222;
					}

					.tip {
						width: 100%;
						padding-top: 20rpx;
						display: flex;

						text {
							padding: 6rpx 10rpx;
							font-size: 24rpx;
							background: #eee;
							color: #999;
							border-radius: 5rpx;
						}
					}

					.money {
						width: 100%;
						padding-top: 10rpx;
						display: flex;
						align-items: center;

						text {
							padding-right: 32rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}

						.color1 {
							color: #FF6230;
						}

						.color2 {
							color: #26C281;
						}
					}

					.money1 {
						width: 100%;
						padding: 20rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							image {
								display: block;
								width: 40rpx;
								height: 40rpx;
							}

							text {
								padding-left: 5rpx;
								font-size: 30rpx;
								font-weight: 600;
								color: #222222;
							}
						}

						.r-btn {
							background: #26C281;
							color: #fff;
							font-size: 24rpx;
							padding: 10rpx 20rpx;
							border-radius: 4rpx
						}

						.right {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}

					.num {
						width: 100%;
						padding-top: 25rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}

						.right {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}

			.tip_txt1 {
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.right {
					display: flex;
					align-items: center;

					.txt1 {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					image {
						display: block;
						width: 40rpx;
						height: 40rpx;
					}

					.txt2 {
						padding-left: 10rpx;
						font-size: 40rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}

			.tip_txt {
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;

					text {
						display: block;
						width: 40rpx;
						height: 40rpx;
						line-height: 39rpx;
						font-size: 24rpx;
						margin-right: 5rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}

					.color1 {
						background: #FF815A;
					}

					.color2 {
						background: #43A5FF;
					}

					.color3 {
						background: #51CE9A;
					}
				}
			}

			.list_btn {
				width: 100%;
				padding: 32rpx;
				display: flex;
				justify-content: flex-end;

				text {
					margin-left: 12rpx;
					display: block;
					padding: 0 20rpx;
					height: 64rpx;
					line-height: 60rpx;
					border-radius: 6rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}

				.btn1 {
					color: #fff;
					background: #43A5FF;
				}

				.btn2 {
					color: #26C281;
					border: 2rpx solid #26C281;
				}
			}
		}
	}
</style>